<template>
  <div class="home-brand">
    <div class="home-brand-header">
      <h3 class="home-brand-title">品牌特卖</h3>
      <span class="home-brand-tip">
        今日上新{{
          brandList.newGoodsCountOfToday > 10000
            ? parseInt(brandList.newGoodsCountOfToday / 10000) + "w"
            : brandList.newGoodsCountOfToday
        }}款
      </span>
      <div class="home-brand-report">
        <van-swipe
          style="height: 0.16rem"
          vertical
          :autoplay="4000"
          :duration="1500"
          :show-indicators="false"
        >
          <van-swipe-item
            v-for="(item, index) in brandList.reports"
            :key="index"
          >
            <span class="home-nav-name"> {{ item.label }} </span>
            <van-icon name="arrow" size="14" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="home-brand-swipe">
      <van-swipe :autoplay="5000" indicator-color="#fe3738" :duration="1500">
        <van-swipe-item v-for="item in brandList.brandDTOS" :key="item.brandId">
          <div
            class="home-brand-logo"
            :style="{ backgroundImage: 'url(' + item.backgroundImg + ')' }"
          >
            <div class="home-brand-name">
              <div class="home-brand-img">
                <img :src="item.brandLogo" alt="图片加载失败" />
              </div>
              <span>{{ item.brandName }}</span>
            </div>
            <div class="home-brand-profit">
              {{ item.longProfit }}
            </div>
            <div class="home-brand-sale">
              已售{{ parseInt(item.recentSale / 1000) / 10 }}万件
              <van-icon name="arrow" />
            </div>
            <div class="home-brand-fans" v-if="item.fansNum">
              {{ parseInt(item.fansNum / 1000) / 10 }}w人关注
            </div>
            <div class="home-brand-fans" v-else>w人关注</div>
            <div class="home-brand-count">仅剩:1天</div>
          </div>
          <div class="home-brand-hot">
            <div
              class="home-brand-good"
              v-for="ele in item.hotPush"
              :key="ele.brandId"
            >
              <img :src="ele.pic" alt="图片加载失败" />
              <div class="home-brand-juan">
                <span>劵</span> {{ ele.quanJine }}元
              </div>
              <div>
                <span class="home-brand-newprice">¥{{ ele.jiage }}</span>
                <span class="home-brand-oldprice">¥{{ ele.yuanjia }}</span>
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const brandList = computed(() => store.state.home.brandList);
    onMounted(() =>
      store.dispatch({
        type: "home/getBrandList",
        data: {
          entityId: 4,
          modelId: 28995,
          proModelId: 21,
          source: 3,
          version: "v1",
          tuserId: 771131,
          isWechat: 0,
        },
      })
    );
    return {
      brandList,
    };
  },
});
</script>

<style lang="stylus" scoped>
.home-brand
    background white
    border-radius .05rem
    margin-top .1rem
    padding .1rem
    font-size .12rem
    .home-brand-header
        display flex
        align-items center
        margin-bottom .2rem
        .home-brand-title
            height .2rem
            font-size .15rem
            font-weight normal
            color #333
            line-height .2rem
            margin 0
            margin-right .05rem
        .home-brand-tip
            height .17rem
            font-size .12rem
            color #888
            line-height .17rem
            transform translateY(.02rem)
            flex 1
        .home-brand-report
            color #fe3738
            .van-swipe-item
                display flex
                justify-content flex-end
                align-items center
    .home-brand-swipe
        font-size .12rem
        overflow hidden
        .van-swipe
            padding-bottom .1rem
        /deep/ .van-swipe__indicators
            bottom 0 !important
            .van-swipe__indicator
                width .18rem
                height .04rem
                border-radius .02rem
        .home-brand-logo
            height 1.05rem
            background-size contain
            border-radius .1rem
            padding .1rem
            box-sizing border-box
            color white
            position relative
            .home-brand-name
                display flex
                align-items center
                font-size .15rem
                margin-bottom .1rem
                .home-brand-img
                    width 0.3rem
                    height 0.3rem
                    margin-right .08rem
                    display flex
                    align-items center
                    background white
                    border-radius .04rem
                    img
                        width .3rem
                        height .15rem
            .home-brand-profit
                font-size .14rem
                cursor pointer
                margin-bottom .05rem
            .home-brand-fans
                position absolute
                right 0
                bottom 0
                box-sizing border-box
                font-size .1rem
                text-align center
                height .19rem
                padding 0 .05rem
                border-radius .1rem .1rem .1rem 0;
                background linear-gradient(276deg,#ff1e2f 0,#e51698 100%)
            .home-brand-count
                position absolute
                top .05rem
                right .05rem
                color #000
        .home-brand-hot
            display flex
            width 3.35rem
            margin-top .1rem
            overflow-x hidden
            .home-brand-good
                width 1.05rem
                margin 0 .05rem
                >img
                    width 1.05rem
                    height 1.05rem
                .home-brand-juan
                    height .12rem
                    background linear-gradient(90deg,#ff8873 0,#ff4f4f 100%)
                    border-radius .02rem
                    padding 0 .05rem 0 .01rem
                    font-size .09rem
                    font-weight 400
                    color #fff
                    line-height .12rem
                    display inline-block
                    position relative
                    z-index 1
                    zoom 1
                    top 0
                    vertical-align middle
                    margin-bottom .07rem
                    span
                        background #fff
                        border-radius .01rem 0 0 .01rem
                        font-size .09rem
                        color #FE3A33
                        margin auto .04rem auto 0
                        min-width .1rem
                        max-width .1rem
                        min-height .1rem
                        max-height .1rem
                        display inline-block
                        text-align center
                        line-height .1rem
                        position relative
                        top 50%
                        transform translateY(-.05rem)
                        float left
                .home-brand-newprice
                    font-size .14rem
                    color #fe3738
                    margin-right .05rem
                .home-brand-oldprice
                    color #aaa
                    text-decoration line-through
</style>
